<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json与html交互</title>
</head>
<body>
<script type="text/javascript">
    //模拟创建后台传输的json数据
    let data = {
        "total": 3,
        "emp": [
            {"empno": '001', "ename": "zhansan", "address": "kaifeng"},
            {"empno": '002', "ename": "zhansan", "address": "kaifeng"},
            {"empno": '003', "ename": "zhansan", "address": "kaifeng"},
        ]
    };
    window.onload = function () {
        let seeElt = document.getElementById("see");
        seeElt.onclick = function () {
            let epms = data.emp;    // 拿到json中的emp数据
            let html = "";  //准备空的html 方便下边为html添加内容
            for (let i = 0; i < epms.length; i++) { //遍历emps 当中的每一个数据
                let emp = epms[i]; //拿到了数据  进行插入拼接数据
                html += "<tr>";
                html += "<td>" + emp.empno + "</td>";
                html += "<td>" + emp.ename + "</td>";
                html += "<td>" + emp.address + "</td>";
                html += "<tr>";
            }
            //将创建好的html片段 插入到empBody当中
            document.getElementById("empBody").innerHTML = html;
            document.getElementById("total").innerHTML = data.total;
        }
    }

</script>

<div id="container">
    <input id="see" type="button" value="查看所有员工"/>
    <table id="table" style="border: 1px solid black">
        <tr>
            <th>员工编号</th>
            <th>员工姓名</th>
            <th>员工地址</th>
        </tr>
        <tbody id="empBody"></tbody>
    </table>
    一共有<span id="total">0</span>条数据
</div>
</body>
</html>
